<template>
  <div>
    <header>
      <h1>实验室节能系统</h1>
      <router-link to="/gl" class="manage-button">设备管理</router-link>
    </header>
    <section class="container">
      <section class="itemLeft">
        <ItemPage>
          <ItemTwo/>
        </ItemPage>
        <ItemPage>
          <ItemOne/>
        </ItemPage>
        <ItemPage>
          <ItemFive/>
        </ItemPage>
      </section>
      <section class="itemCenter">
        <LabBox/>
      </section>
      <section class="itemRight">
        <ItemPage>
          <ItemFour/>
        </ItemPage>
        <ItemPage>
          <ItemThree/>
        </ItemPage>
        <ItemPage>
          <ItemSix/>
        </ItemPage>
      </section>
    </section>
  </div>
</template>
<script>
import ItemPage from "@/components/itemPage.vue";
import ItemOne from "@/components/itemOne.vue"
import ItemTwo from "@/components/itemTwo.vue"
import ItemThree from "@/components/itemThree.vue"
import ItemFour from "@/components/itemFour.vue"
import ItemFive from "@/components/itemFive.vue"
import ItemSix from "@/components/itemSix.vue"

import {inject} from "vue"
import LabBox from "@/components/labBox.vue";
export default {
  components:{
    ItemPage,ItemOne,ItemTwo,ItemThree,ItemFour,LabBox,ItemFive,ItemSix
  },
  setup(){
    let $echarts=inject("echarts")
    let $http=inject("axios")
    console.log($echarts)
    console.log($http)
  }
};
</script>
<style scoped lang="less">
  header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.7rem;
    padding: 0 20px;
    width: 100%;
    h1{
      font-size:0.6rem;
      color:#fff;
      text-align:center;
      line-height:1rem;
    }
  }
  .manage-button {
  padding: 0.2rem; /* 按钮内边距 */
  font-size: 0.2rem;
  background-color: #00e1ffb5; 
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
}

.manage-button:hover {
  background-color: #00b7ff; /* 鼠标悬浮时的按钮背景颜色 */
}
  .container{
    min-width: 1200px;
    max-width: 2048px;
    height: 11rem;
    margin:0 auto;
    padding: 0.125rem 0.125rem 0;
    display: flex;
    //设置左右容器份数
    .itemLeft,.itemRight{
      flex:3;
    }
    //设置中间容器份数
    .itemCenter{
      flex:5;
      height: 10.5rpx;
      max-width: 100%;
      border:1px solid rgb(0, 136, 248);
      border-radius: 8px;
      padding:0.125rem;
      margin: 0.25rem;  
      display: flex;  
      
    } 
  } 
</style>